<template>
	<view class="coupons">
		<view class="" style="position: absolute;background: rgba(0,0,0,0.6);width: 100%;height: 100%;z-index: 998;" v-if="onclickin"></view>
		<view class="scrolllist"  v-if="onclickin">
			<view class="toubu">优惠券使用说明</view>
			<scroll-view scroll-y="true" class="scroll">
				<view class="lingqu">1、领取时间</view>
				<view class="xiangqing">{{resultlist.use_time}}</view>
				<view class="lingqu">2、使用时间</view>
				<view class="xiangqing">{{resultlist.use_time}}</view>
				<view class="lingqu">3、参与会员</view>
				<view class="xiangqing">{{resultlist.vip}}</view>
				<view class="lingqu">4、指定使用品类</view>
				<view class="xiangqing">{{resultlist.windows}}</view>
				<view class="lingqu">5、使用门槛</view>
				<view class="xiangqing">{{resultlist.man}}</view>
				<view class="lingqu">6、规则说明</view>
				<view class="xiangqing">{{resultlist.des}}</view>
			</scroll-view>
			<view class="fanhui" @click="onclickfh">
				返回
			</view>
		</view>
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#2f75fa" :activeStyle="{
					color: '#2f75fa'
				}" :inactiveStyle="{
					color: '#353535'
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<!-- // q_type 平台1 场馆2 新人3 -->
		<!-- //type 代金券1 满减券2 折扣券3 -->
		<view class="coupons-list" v-if="wrapperlist.length" :class="[{ lapse: currentTab === 2 }]">
			<view v-for="(item,index) in wrapperlist" :key="index" class="coupons-item flex-between" @click="sav_list(item,index)">
				<view class="status pa"
					:style="{ backgroundImage: tabsList[currentTab].icon ? `url(${tabsList[currentTab].icon})` : '' }">
				</view>
				<!-- 折扣券1 -->
				<view class="left flex-center" v-if="item.type == 1">
					<view class="free" v-if="item.free">免费</view>
					<view class="text-center" v-else>
						<view>
							¥ <text class="price">{{ item.jian }}</text>
						</view>
						<text class="full">满{{ item.man }}元可用</text>
					</view>
				</view>
				<view class="right" v-if="item.type == 1">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="desc">
						有效期至：{{ item.expire_time }}
					</view>
					<view class="desc" style="color: red;" v-if="item.q_type == 1">
						平台券
					</view>
					<view class="desc" v-if="item.q_type == 2">
						场馆券
					</view>
					<view class="desc" v-if="item.q_type == 3">
						新人券
					</view>

				</view>
				<!-- <button class="button_1 flex-col" @click="onClick_1" v-if="item.type == 1">
					<text class="text_11">立即使用</text>
				<!-- 满减券2 -->
				<view class="left flex-center" v-if="item.type == 2">
					<view class="free" v-if="item.free">免费</view>
					<view class="text-center" v-else>
						<view>
							¥ <text class="price">{{ item.jian }}</text>
						</view>
						<text class="full">满{{ item.man }}元可用</text>
					</view>
				</view>
				<view class="right" v-if="item.type == 2">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="desc">
						有效期至：{{ item.expire_time }}
					</view>
					<view class="desc" v-if="item.q_type == 1">
						平台券
					</view>
					<view class="desc" v-if="item.q_type == 2">
						场馆券
					</view>
					<view class="desc" v-if="item.q_type == 3">
						新人券
					</view>
				</view>
				<!-- 折扣券3 -->
				<view class="left flex-center" v-if="item.type == 3">
					<view class="free" v-if="item.free">免费</view>
					<view class="text-center" v-else>
						<view>
							<text class="price">{{ item.jian }}折</text>
						</view>
						<text class="full">满{{ item.man }}元可用</text>
					</view>
				</view>
				<view class="right" v-if="item.type == 3">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="desc">
						有效期至：{{ item.expire_time }}
					</view>
					<view class="desc" v-if="item.q_type == 1">
						平台券
					</view>
					<view class="desc" v-if="item.q_type == 2">
						场馆券
					</view>
					<view class="desc" v-if="item.q_type == 3">
						新人券
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png" />

	</view>
	</view>
</template>

<script>
	const market = require("@/api/market/index.js");
	export default {
		data() {
			return {
				 onclickin:false,
				currentTab: 0,
				tabsList: [{
						name: '未使用'
					},
					{
						name: '已使用',
						icon: this.$https.assetsPath + 'dcf0218fded9036bea5025856404f6c159351f45.png'
					},
					{
						name: '已过期',
						icon: this.$https.assetsPath + '2e8eb51996967ced9c8480a2a2054f07ea437a0d.png'
					},
				],
				couponsList: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 8,
				},
				totalPage: '', //几页
				wrapperlist: [],
				total: "",
				resultlist:{}
			}
		},
		onLoad() {
			this.getMyCoupon()
		},
		methods: {
			onclickfh() {
				this.onclickin = false
			},
			sav_list(item,index) {
				this.getCouponDetail(item.id)
				this.onclickin = true
			},
			async getCouponDetail(id) {
				let postData = {
					id: id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await market.getCouponDetail(postData);
				if (res.code == 1) {
					this.resultlist = res.data.result
				}
			},
			async getMyCoupon() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.wrapperlist = [];
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					status: this.currentTab,
					venue_id: '',
					window_id: '',
				}
				let res = await market.getMyCoupon(postData);
				if (res.code == 1) {
					that.wrapperlist = that.wrapperlist.concat(res.data.result.data); //将数据拼接在一起
					that.totalPage = res.data.result.last_page
				}
			},
			// 滚动加载
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getMyCoupon()
			},
			
			onClickTab({
				index
			}) {
				this.listQuery.pageNo = 1
				this.currentTab = index;
				this.wrapperlist = []
				this.getMyCoupon()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupons {
		width: 100%;
		min-height: 100%;
		background-color: #f7f7f7;
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;

		.scrolllist {
			position: fixed;
			z-index: 999;
			color: #000000;
			width: 80%;
			height: 50%;
			background-color: #fff;
			left: 10%;
			top: 20%;
			border-radius: 10rpx;

			.fanhui {
				width: 30%;
				height: 80rpx;
				background: linear-gradient(0deg, #528EFF, #2F75FA);
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				margin: 0 auto;
				font-size: 30rpx;
				margin-top: 10rpx;
				position: absolute;
				bottom: 20rpx;
				left: 35%;
			}
			.toubu {
				width: 100%;
				height: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				margin-top: 10rpx;
				position: absolute;
				top: 10rpx;
			}

			.scroll {
				position: absolute;
				z-index: 999;
				color: #000000;
				width: 100%;
				height: 36vh;
				background-color: #fff;
				left: 0;
				top: 70rpx;
				border-radius: 10rpx;
				.lingqu {
					color: rgba(224, 37, 27, 1);
					font-size: 28rpx;
					text-align: left;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}

				.xiangqing {
					width: 97%;
					height: auto;
					overflow-wrap: break-word;
					color: rgba(0, 0, 0, 1.0);
					font-size: 28rpx;
					font-weight: 500;
					text-align: left;
					line-height: 34rpx;
					margin: 10rpx 0 0 20rpx;
					padding-right: 20rpx;
				}
			}
		}



		/deep/.u-tabs {
			background-color: #fff;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}
		}

		.coupons-list {
			padding: 20rpx 40rpx;

			&.lapse {
				.left {
					color: #bebebe;
				}
			}
		}

		.coupons-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 40rpx 0;
			position: relative;
			overflow: hidden;

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				background-color: #f7f7f7;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				transform: translateY(-50%);
			}

			&::before {
				left: 0;
				transform: translate(-50%, -50%);
			}

			&::after {
				right: 0;
				transform: translate(50%, -50%);
			}

			&+.coupons-item {
				margin-top: 20rpx;
			}

			.status {
				top: -30rpx;
				right: 30rpx;
				width: 116rpx;
				height: 116rpx;
				background-position: left top;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.left {
				width: 240rpx;
				color: #f63043;
				font-size: 28rpx;

				.free {
					font-size: 42rpx;
				}

				.price {
					font-size: 46rpx;
					font-weight: bold;
				}
			}

			.button_1 {
				background-color: rgba(255, 255, 255, 1);
				border-radius: 30px;
				height: 60rpx;
				border: 1px solid rgba(252, 62, 49, 1);
				width: 174rpx;
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				text-align: center;
				line-height: 60rpx;

				.text_11 {
					width: 111rpx;
					height: 60rpx;
					overflow-wrap: break-word;
					color: rgba(252, 62, 49, 1);
					font-size: 28rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: left;
					white-space: nowrap;
					line-height: 60rpx;
					// margin: 17rpx 0 0 30rpx;
				}
			}

			.right {
				flex: 1;

				.name {
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
				}

				.desc {
					font-size: 28rpx;
					color: #d1d1d1;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>